<template>
	<view v-if="publicAttentionCode">
		<view class="attention_public_btn" v-if="showBtn" @click="onShowPopup">
			<text>关注</text> 
			<text>公众号</text>
		</view>
		<z-popup v-model="showPopup" type="2000" @change="popupChange">
			<view class="attention_public_box">
				<image :src="publicAttentionCode" mode="aspectFit"></image>
				<!-- #ifdef H5 -->
				<view class="prompt">长按二维码关注公众号</view>
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<view class="prompt">扫一扫关注公众号</view>
				<!-- #endif -->
			</view>
		</z-popup>
	</view>
</template>

<script>
	import zPopup from '@/components/common/popup';
	let settingWritePhotosAlbum = false;
	export default {
		components: {
			zPopup
		},
		props: {
			value: {
				type: Boolean,
				default() {
					return false;
				}
			},
			showBtn:{
				type: Boolean,
				default() {
					return false;
				}
			}
		},
		data() {
			return {
				publicAttentionCode: "",
				showPopup:false
			}
		},
		watch:{
			value(val){
				this.showPopup = val;
			}
		},
		created() {
			this.publicAttentionCode = this.$base.publicAttentionCode;
			if(this.value){
				this.showPopup = this.value;
			}
			if (!uni.getStorageSync("publicAttention")) {
				this.showPopup = true;
				uni.setStorageSync("publicAttention", true);
			}
		},
		methods: {
			onShowPopup(){
				this.showPopup = true;
				// this.$emit("input",true);
			},
			// 保存图片
			onSaveImg() {
				if (this.publicAttentionCode) {
					// #ifdef MP-WEIXIN
					if (settingWritePhotosAlbum) {
						uni.getSetting({
							success: res => {
								if (res.authSetting['scope.writePhotosAlbum']) {
									uni.downloadFile({
										url: this.publicAttentionCode,
										success: data => {
											if (data.statusCode == 200) {
												uni.saveImageToPhotosAlbum({
													filePath: data.tempFilePath,
													success: () => {
														uni.showToast({
															title: '保存成功'
														});
													}
												});
											}
										}
									});
								} else {
									uni.showModal({
										title: '提示',
										content: '请先在设置页面打开“保存相册”使用权限',
										confirmText: '去设置',
										cancelText: '算了',
										success: data => {
											if (data.confirm) {
												uni.openSetting();
											}
										}
									});
								}
							}
						});
					} else {
						settingWritePhotosAlbum = true;
						uni.authorize({
							scope: 'scope.writePhotosAlbum',
							success: () => {
								uni.downloadFile({
									url: this.publicAttentionCode,
									success: data => {
										if (data.statusCode == 200) {
											uni.saveImageToPhotosAlbum({
												filePath: data.tempFilePath,
												success: () => {
													uni.showToast({
														title: '保存成功'
													});
												}
											});
										}
									}
								});
							}
						});
					}
					// #endif
					// #ifdef H5
					uni.downloadFile({
						url: this.publicAttentionCode,
						success: data => {
							if (data.statusCode == 200) {
								window.open(data.tempFilePath);
							}
						}
					});
					// #endif
					// #ifdef APP-PLUS
					uni.saveImageToPhotosAlbum({
						filePath: this.publicAttentionCode,
						success: () => {
							uni.showToast({
								title: '保存成功'
							});
						}
					});
					// #endif
				} else {
					uni.showToast({
						title: '未找到图片',
						icon: 'none'
					});
				}
			},
			popupChange(e){
				this.$emit("input", e);
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.attention_public_btn {
		position: fixed;
		bottom: 130rpx;
		right: 30rpx;
		background-color: $themeColor;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		font-size: 24rpx;
		color: #FFF;
		z-index: 3;
	}

	.attention_public_box {
		padding: 20rpx;
		background-color: #FFF;
		border-radius: 20rpx;

		image {
			width: 500rpx;
			height: 500rpx;
		}

		.prompt {
			padding: 10rpx 10rpx 0rpx 10rpx;
			font-size: 28rpx;
			color: #333;
			text-align: center;
		}
	}
</style>
